<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader> 
			<nav-bar-custom left-icon="left" scanType="1" :leftType="'1'"  @clickLeftBack="clickLeftBack" :title="$t('consumo.nonBomMaterialConsumption')" :rightText="$t('distributedEnter.scanRecord')"
				@clickRight="clickRight"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto">
				<!-- 简单生产领料扫描条码模-->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('consumo.nonBomMaterialConsumptionInfo')}}
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="padding-right: 20rpx;"><text
							class="required-color">*</text>{{$t('distributedEnter.materialCoded')}}：</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.materialCode" 
							type="search" :placeholder="$t('distributedOut.pleaseMaterial')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title"><text class="required-color">*</text>{{$t('distributedOut.warehouse')}}：</text>
						<text>{{data.scanInfo.warehouseCode}}</text>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="padding-right: 40rpx;"><text
							class="required-color">*</text>{{$t('translationImage.pickingNumber')}}：</text>
						<uni-easyinput class="uni-mt-5" v-model="data.totalNum" type="number" :placeholder="$t('translationImage.pleaseScan')" disabled >
						</uni-easyinput>
					</view>
				</view>
				<!-- 当前扫描条码信息展示-->
				<view v-if="(Object.keys(data.scanInfo).length)" class="custom-form-card" >
					<uni-collapse v-model="data.cardValue">
						<uni-collapse-item titleBorder="none" :show-animation="true">
							<template v-slot:title>
								<view class="custom-card-title">
									<text class="title-line"></text>
									{{$t('distributedOut.atPresent')}}
								</view>
							</template>
							<view class="content" >
								<view class="custom-card-itemOne">
									<text class="item-info-title">{{$t('distributedEnter.materialCoded')}}：</text>{{data.scanInfo.barcode}}
								</view>
								<view class="custom-card-itemOne">
									<view class="card-item-50">
										<text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text>{{data.scanInfo.materialCode}}
									</view>
									<view class="card-item-50">
										<text class="item-info-title">{{$t('distributedEnter.materialName')}}：</text>{{data.scanInfo.materialName}}
									</view>
								</view>
								<view class="custom-card-itemOne">
									<text class="item-info-title">{{$t('distributedEnter.materialSpec')}}：</text>{{data.scanInfo.materialSpec}}
								</view>
								<view class="custom-card-itemOne">
									<view class="card-item-50">
										<text class="item-info-title">{{$t('distributedEnter.uom')}}：</text>{{data.scanInfo.unit}}
									</view>
									<view class="card-item-50">
										<text class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{data.scanInfo.currentQty}}
									</view>
								</view>
								<view class="custom-card-itemOne">
									<!-- <view class="card-item-50" style="width: 100%;">
										<text class="item-info-title">{{$t('distributedOut.warehouse')}}：</text>{{data.scanInfo.warehouseName}}
									</view> -->
									<view class="card-item-50" style="width: 100%;">
										<text class="item-info-title">{{$t('distributedEnter.scannedQuantity')}}：</text>{{data.scanInfo.inputNum}}
									</view>
								</view>
								<view class="custom-card-itemOne">
									<!-- <view class="card-item-50" style="width: 100%;">
										<text class="item-info-title">{{$t('distributedOut.warehouse')}}：</text>{{data.scanInfo.warehouseName}}
									</view> -->
									<view class="card-item-50" style="width: 100%;">
										<text class="item-info-title">{{$t('distributedOut.location')}}：</text>{{data.scanInfo.locationName}}
									</view>
								</view>
								<view class="custom-card-itemOne">
									<view class="card-item-50">
										<text class="item-info-title">{{$t('distributedOut.warehouse')}}：</text> 
										{{data.scanInfo.warehouseCode}}
									</view>
									<!-- <view class="card-item-50">
										<text class="item-info-title">{{$t('distributedOut.location')}}：</text>{{data.scanInfo.locationName}}
									</view> -->
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			
				<!-- 底部操作栏按钮 -->
				<view class="page-bottom">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="submit">
						{{$t('calendar.submit')}}
					</view>
				</view>

				<!-- 弹框填写数量 -->
				<uni-popup ref="inputDialog" type="center">
					<view class="input-dialog-box">
						<view class="input-dialog-content">
							<view class="input-dialog-item">
								{{$t('distributedEnter.materialCode')}}:{{data.scanInfo.barcode}}
							</view>
							<view class="input-dialog-item">
								{{$t('distributedEnter.materialName')}}:{{data.scanInfo.materialName}}
							</view>
							<view class="input-dialog-item">
								{{$t('translationImage.currentNumbers')}}:{{data.scanInfo.currentQty}}
							</view>
						<view 
							class="gui-form-item">
								<text>{{$t('distributedEnter.qty')}}：</text>
								<view>
									<input type="number" 
									class="gui-form-input" 
									v-model="data.scanInfo.inputNum" 
									name="name1" 
									:placeholder="$t('distributedEnter.pleaseMaterialQty')" />
							</view>
							</view>
						</view>
						<view class="input-dialog-footer">
							<view class="input-dialog-button" @click="cancelFn">
								{{$t('popup.cancel')}}
								</view>
							<view class="input-dialog-button dialog-button-left" @click="confirmFn">
								{{$t('popup.confirm')}}
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	//引入文件
	import { navigate } from '@/utils/routerSkip.js';
	import { ref, reactive,onMounted ,computed,watch,toRaw} from "vue";
	import { getDataDictionaryFn } from '@/utils/index.js'
	import tableColor from '@/hooks/tableColor.js';
	import graceJS from "@/Grace6/js/grace.js";
	import { simpleProductionPicking,wmsSelectWmsBarcodeInfo } from '@/api/api.js'
	import { USERINFO,OPERATION_COMMIT, OPERATION_LOOK, OPERATION_SCAN } from '@/constant/index.js'
	import { basPdaOperationLogFn } from '@/utils/index.js';
	import pdaScan from '@/hooks/pdaScan.js'
	import { useStore } from "vuex";
	import { onBackPress } from '@dcloudio/uni-app';
	import testVue from '../test/test.vue';
	//JS国际化引入
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	let store = useStore();

	//定义变量
	let data = reactive({
	materialCode: "",
	warehouse:'',
	scanNumber:0,
	returnSpScanList:[], // 扫描纪录的存储数组
	scanInfo:{}, //当前扫描信息
	selectList:[{
		id:1,
		name:'爱丽'
	},{
		id:2,
		name:'AFL'
	}],
	cardValue:['0'],
	
	});
	data.scanList = computed(()=>{
		console.log(store.state.simpleMaterialList,'data.scanList')
		return store.state.simpleMaterialList
	})
	data.totalNum = computed(()=>{
		let total = 0;
		data.scanList.forEach(x => {
			total += Number(x.inputNum)
		}); 
		return total
	})

	//页面弹框输入数量使用的变量
	let inputDialog = ref(null);
	const {scan}=pdaScan();

	// 监听用户使用相机
	const iconClick= async (type)=>{
		if(type==='suffix'){
			let code=await scan();
			getCode(code,'scan')
		}
	}

	//扫描条码框
	const confirm = () => {
		getCode(data.materialCode,'keydown')
	}

	//获取code 
	const getCode= async (code,type)=>{
		// 存储扫描的的条码,通过barode去判断是否有重复
		let arr=data.scanList.filter(x=> x.barcode==code);
		if(arr.length>0){
			uni.showToast({title:t('smashRemoval.codesRepeatedly'),icon:'none'});
			return  
		}
		data.materialCode=code;
		let parmes = {
			barcode: code,
			selectType: 'simpleProductionPicking',
		}
		let res = await wmsSelectWmsBarcodeInfo(parmes)
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '非BOM物料消耗'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:res.status,//返回状态
				errorMessage:res.message,//错误信息
				isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType:OPERATION_SCAN
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if(res.status==200){
			let bool = await filter(res.data)
			if(!bool){
				uni.showToast({title:t('smashRemoval.non-BOMMaterial'),icon:'none'});
			    return  
			}
			data.scanInfo=res.data;
			inputDialog.value.open();//打开弹框
			data.scanInfo.inputNum=0; //弹框的数据

		}else{
			uni.showToast({title:res.message, icon:"none"})
		}
	}

	//定时弹框输入数量
	onMounted(()=>{
		uni.$on('scancodedate', (data) => {
			console.log('获取到的code：' + data.code)
			getCode(data.code, 'pda')
		})
	})
	onBackPress((options) => {
		if (options.from == 'backbutton') {
			navBackCheck()
			return true;
		}
	})
	//导航栏左侧返回
	const clickLeftBack = () => {
		navBackCheck()
	}
	const navBackCheck = () =>{
		if(!data.scanList.length){
			uni.navigateBack({
				delta: 1
			});
			return  true
		}
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('materials.unsubmittedDataIn'),
			success: function (res) {
				if (res.confirm) {
					store.commit("clearSimpleMaterialList");
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		
		return true
	}
	const filter = async (data)=>{
		// 查询目的仓库
		let locationCapacity  = await getDataDictionaryFn('NotBomMaterial')
		console.log(locationCapacity)
		let bool = false
		bool = locationCapacity.some((item)=>{
			return item.value == data.materialCode
		})
		return bool
	}
	// 弹框的取消按钮
	const cancelFn = () => {
		inputDialog.value.close();
	}
	//弹框的确定按钮
	const confirmFn = () => {
		if(!data.scanInfo.inputNum){
			uni.showToast({title:t('smashRemoval.quantityCannot'),icon:'none'})
			return
		}
		if(Number(data.scanInfo.inputNum) <= 0){
			uni.showToast({title:t('materials.quantityCannot'),icon:'none'})
			return
		}
		if(Number(data.scanInfo.inputNum) > Number(data.scanInfo.currentQty)){
			uni.showToast({title:t('materials.currentBarcodeQuantity'),icon:'none'})
			data.scanInfo.inputNum=null
			return
		}
		store.commit('addSimpleMaterialList',data.scanInfo)
		inputDialog.value.close();
	}

	//页面跳转
	const  clickRight=()=>{
		navigate({
			url:'/pages/simpleMaterial/simpleAcquisitionRecord'
		})
	}

	//提交
	const submit = () => {
		console.log(data.scanList.length)
		if(data.scanList.length==0){
			uni.showToast({title:t('stockManage.pleaseScanCode'),icon:'none'});
			return
		}
		let tep = []
		data.scanList.forEach(x=>{
			tep.push({
				pickUpQty: x.inputNum,
				id: x.id,
			})
		})
		console.log(tep)
		let parmes = {
			wmsBarcodes:tep
		}
		// 添加加载框
		uni.showLoading({
			title: 'loading',
			mask: true
		});
		simpleProductionPicking(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '非BOM物料消耗'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_COMMIT
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			if(res.status==200){
				//隐藏加载框
				uni.hideLoading();
				uni.showToast({title:t('smashRemoval.barCodeSubmission')});
				data.materialCode="";
				data.scanInfo={};
				store.commit("clearSimpleMaterialList");//提交成功清空vuex中的数据，同时领料数量也会自动清空
				// data.totalNum=null;
			}else {
					uni.showToast({ title: res.message, icon: "none" });
			}
		})
	}
</script>

<style lang="scss" scoped>
</style>
